<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: [wangll]
 * @LastEditTime: 2021-09-22 16:55:59
-->
<template>
<!-- 2.设置图表容器 容纳图表 -->
  <div ref='root' style="height:150px">
    
  </div>
</template>
<script>
import { Pie } from '@antv/g2plot';
// 1.引入
export default {
  data(){
    return{

    }
  },
  mounted(){
    this.initCharts();
  },
  // 3.创建一个图表实例
  methods:{
    initCharts(){
      let pie = new Pie(this.$refs['root'],{
        data:[
          { type: '美容洗护', value: 27 },
          { type: '生鲜水果', value: 25 },
          { type: '粮油副食', value: 18 },
          { type: '家具家电', value: 15 },
          { type: '母婴用品', value: 10 },
          { type: '其他', value: 5 },],
        angleField: 'value',
        colorField: 'type',
        radius: 1,
        innerRadius: 0.6,
        label: {
          type: 'inner',
          offset: '-50%',
          content: '{value}',
          style: {
            textAlign: 'center',
            fontSize: 14,
          },
        },
        interactions: [{ type: 'element-selected' }, { type: 'element-active' }],
        statistic: {
          title: false,
          content: {
            style: {
              whiteSpace: 'pre-wrap',
              overflow: 'hidden',
              textOverflow: 'ellipsis',
            },
            content: 'AntV\nG2Plot',
          },
        },
      });
      // 4.渲染
      pie.render();
    }
  }
}
</script>